<template>
  <div class="container">
    <el-row>
      <el-col :span="20">
        <span style="font-size:18px; font-weight:bold;">商品分类</span>
        <span style="font-size:12px; color:red;"
          >注：此排序为首页楼层的顺序，需先选择首页显示后再排序，如首页不显示则不能参与排序</span
        >
      </el-col>
      <el-col style="text-align:right;" :span="4">
        <el-button
          style="margin-left:5px;"
          @click="
            addVisible = true;
            currentClass = {};
          "
          size="small"
          type="primary"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-table
      ref="classTable"
      :data="classList"
      style="width: 100%;margin-top:5px;"
      :height="tableHeight"
      row-key="id"
      border
      stripe
    >
      <el-table-column prop="kind_name" label="名称"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img style="height:50px;" :src="scope.row.style" alt="" />
        </template>
      </el-table-column>
      <el-table-column label="是否首页展示">
        <template slot-scope="scope">
          <el-switch
            v-if="!scope.row.higherup"
            v-model="scope.row.home_type"
            active-color="#13ce66"
            :active-value="1"
            :inactive-value="0"
            @change="homePage(scope.row)"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="排序">
        <template slot-scope="scope">
          <el-input
            @change="setSort(scope.row)"
            type="number"
            v-model="scope.row.sort"
          >
          </el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template slot-scope="scope">
          <div style="text-align:center;">
            <el-button @click="classEdit(scope.row)" type="primary" size="small"
              >编辑</el-button
            >
            <el-button
              v-if="!scope.row.sys_default && !scope.row.higherup"
              @click="addChildClass(scope.row)"
              type="primary"
              size="small"
              >添加子分类</el-button
            >
            <el-button
              v-if="!scope.row.sys_default"
              @click="deleteClass(scope.row.id)"
              type="danger"
              size="small"
              >删除</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <add-class
      :classObj="currentClass"
      :visible="addVisible"
      @close="
        addVisible = false;
        getClassList();
      "
    ></add-class>
  </div>
</template>

<script>
import {
  getGoodClassList,
  setClassHome,
  setClassSort,
  deleteClass
} from "@/api/good-mng";
import addClass from "./component/add-class";
export default {
  name: "GoodClass",
  data() {
    return {
      classList: [],
      tableHeight: 0,
      addVisible: false,
      currentClass: {}
    };
  },
  methods: {
    deleteClass(id) {
      this.$confirm("确认删除该分类?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        deleteClass({ id }).then(res => {
          if (res.code === 200) {
            this.getClassList();
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          }
        });
      });
    },
    addChildClass(row) {
      this.currentClass = { higherup: row.id };
      this.addVisible = true;
    },
    classEdit(row) {
      this.$refs.classTable.toggleRowExpansion(row);
      this.currentClass = row;
      this.addVisible = true;
    },
    setSort(row) {
      // if (row.sort < 0) {
      //   this.$message.error('请输入大于等于0的整数');
      //   return;
      // }
      setClassSort({
        id: row.id,
        sort: row.sort
      }).then(res => {
        if (res.code === 200) {
          this.getClassList();
        }
      });
    },
    homePage(row) {
      setClassHome({
        id: row.id,
        homeType: row.home_type
      });
    },
    changeSize() {
      this.tableHeight = document.body.clientHeight - 150;
      window.onresize = () => {
        this.changeSize();
      };
    },
    getClassList() {
      getGoodClassList().then(res => {
        if (res.code === 200) {
          this.classList = res.data.map(item => {
            item.children = item.lower;
            delete item.lower;
            return item;
          });
        }
      });
    }
  },
  created() {
    this.changeSize();
    this.getClassList();
  },
  components: {
    addClass
  }
};
</script>

<style></style>
